<template xmlns="http://www.w3.org/1999/html">
  <div>
    <Card shadow>
      <Form
        ref="searchForm"
        :model="pageParams"
        inline
        :label-width="80">
        <FormItem label="请求路径" prop="path">
          <Input type="text" v-model="pageParams.path" placeholder="请输入关键字"/>
        </FormItem>
        <FormItem label="接口名称" prop="apiName">
          <Input type="text" v-model="pageParams.apiName" placeholder="请输入关键字"/>
        </FormItem>
        <FormItem label="接口编码" prop="apiCode">
          <Input type="text" v-model="pageParams.apiCode" placeholder="请输入关键字"/>
        </FormItem>
        <FormItem label="服务名" prop="serviceId">
          <Input type="text" v-model="pageParams.serviceId" placeholder="请输入关键字"/>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSearch()">查询</Button>&nbsp;
          <Button @click="handleResetForm('searchForm')">重置</Button>
        </FormItem>
      </Form>
      <div class="table-operator">
        <ButtonGroup>
          <Button
            :disabled="$auth('systemApiEdit')?false:true"
            class="search-btn"
            type="primary"
            @click="handleModal()">
            <span>新增</span>
          </Button>
        </ButtonGroup>
        <Dropdown
          v-if="tableSelection.length>0 && $auth('systemApiEdit')"
          @on-click="handleBatchClick"
          style="margin-left: 20px">
          <Button>
            <span>批量操作</span>
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <DropdownMenu slot="list">
            <DropdownItem name="remove">删除</DropdownItem>
            <Dropdown placement="right-start">
              <DropdownItem>
                <span>状态</span>
                <Icon type="ios-arrow-forward"></Icon>
              </DropdownItem>
              <DropdownMenu slot="list">
                <DropdownItem name="status1">正常</DropdownItem>
                <DropdownItem name="status2">禁用</DropdownItem>
                <DropdownItem name="status3">维护中</DropdownItem>
              </DropdownMenu>
            </Dropdown>
            <Dropdown placement="right-start">
              <DropdownItem>
                <span>公开访问</span>
                <Icon type="ios-arrow-forward"></Icon>
              </DropdownItem>
              <DropdownMenu slot="list">
                <DropdownItem name="open1">公开的</DropdownItem>
                <DropdownItem name="open2">内部的</DropdownItem>
              </DropdownMenu>
            </Dropdown>
            <Dropdown placement="right-start">
              <DropdownItem>
                <span>身份认证</span>
                <Icon type="ios-arrow-forward"></Icon>
              </DropdownItem>
              <DropdownMenu slot="list">
                <DropdownItem name="auth1">身份认证</DropdownItem>
                <DropdownItem name="auth2">无需认证</DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </DropdownMenu>
        </Dropdown>
      </div>
      <s-table :url="$apis.api.page" :columns="columns" :params="pageParams" ref="table">
        <template slot="apiName" slot-scope="{ row }">
          <span>{{ row.apiName }}</span>
        </template>
        <template slot="isAuth" slot-scope="{ row }">
          <Tag color="green" v-if="row.isOpen===1">外部访问</Tag>
          <Tag v-else-if="row.isOpen!==1">外部访问</Tag>
          <Tag color="green" v-if="row.isAuth===1">身份认证</Tag>
          <Tag v-else-if="row.isAuth!==1">身份认证</Tag>
          <Tag v-if="row.status===1" color="green">正常</Tag>
          <Tag v-else-if="row.status===2" color="orange">维护中</Tag>
          <Tag v-else="" color="red">禁用</Tag>
        </template>
        <template slot="action" slot-scope="{ row }">
          <a style="margin-right: 5px;" :disabled="$auth('systemApiEdit')?false:true" @click="handleModal(row)">
            编辑</a>
          <span style="margin-right: 5px;">|</span>
          <a style="margin-right: 5px;" :disabled="$auth('systemApiEdit')?false:true" @click="handleRemove(row)">
            删除</a>
        </template>
      </s-table>
    </Card>
    <api-modal ref="apiModal"></api-modal>
  </div>
</template>

<script>
import ApiModal from './modal'

export default {
  name: 'SystemApi',
  components: { ApiModal },
  data () {
    return {
      tableSelection: [],
      pageParams: {
        path: '',
        apiName: '',
        apiCode: '',
        serviceId: ''
      },
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '编码',
          key: 'apiCode',
          width: 300
        },
        {
          title: '名称',
          key: 'apiName',
          slot: 'apiName',
          width: 300,
          filters: [
            {
              label: '禁用',
              value: 0
            },
            {
              label: '正常',
              value: 1
            }
          ],
          filterMultiple: false,
          filterMethod (value, row) {
            if (value === 0) {
              return row.status === 0
            } else if (value === 1) {
              return row.status === 1
            }
          }
        },
        {
          title: '路径',
          key: 'path',
          width: 200
        },
        {
          title: '分类',
          key: 'apiCategory',
          width: 100
        },
        {
          title: '服务名称',
          key: 'serviceId',
          width: 200
        },
        {
          title: '接口安全',
          key: 'isAuth',
          slot: 'isAuth',
          width: 300
        },
        {
          title: '描述',
          key: 'apiDesc',
          width: 200
        },
        {
          title: '修改时间',
          key: 'updateTime',
          width: 180
        },
        {
          title: '操作',
          key: '',
          slot: 'action',
          fixed: 'right',
          width: 120
        }
      ],
      data: []
    }
  },
  methods: {
    handleModal (data) {
      this.$refs['apiModal'].handleShow(data)
    },
    handleResetForm (form) {
      this.$refs[form].resetFields()
    },
    handleSearch () {
      this.tableSelection = []
      this.$refs['table'].search()
    },
    handleRemove (data) {
      this.$http.delete(this.$apis.api.remove, {
        apiId: data.apiId
      }, this)
    },
    handleTableSelectChange (selection) {
      this.tableSelection = selection
    },
    handleBatchClick (name) {
      if (name) {
        this.$Modal.confirm({
          title: `已勾选${this.tableSelection.length}项,是否继续执行操作？`,
          onOk: () => {
            const idArr = []
            this.tableSelection.map(item => {
              if (!idArr.includes(item.apiId)) {
                idArr.push(item.apiId)
              }
            })
            const ids = idArr.join(',')
            switch (name) {
              case 'remove':
                this.$http.post(this.$apis.api.batchRemove, {
                  ids: ids
                }, this)
                break
              case 'open1':
                this.$http.post(this.$apis.api.batchUpdateOpen, {
                  ids: ids,
                  open: 1
                }, this)
                break
              case 'open2':
                this.$http.post(this.$apis.api.batchUpdateOpen, {
                  ids: ids,
                  open: 2
                }, this)
                break
              case 'status1':
                this.$http.post(this.$apis.api.batchUpdateStatus, {
                  ids: ids,
                  status: 1
                }, this
                )
                break
              case 'status2':
                this.$http.post(this, {
                  url: this.$apis.api.batchUpdateStatus,
                  ids: ids,
                  status: 0
                }
                )
                break
              case 'status3':
                this.$http.post(this.$apis.api.batchUpdateStatus, {
                  ids: ids,
                  status: 2
                }, this
                )
                break
              case 'auth1':
                this.$http.post(this.$apis.api.batchUpdateAuth, {
                  ids: ids.join(','),
                  auth: 1
                }, this
                )
                break
              case 'auth2':
                this.$http.post(this.$apis.api.batchUpdateAuth, {
                  ids: ids.join(','),
                  auth: 0
                }, this
                )
                break
            }
          }
        })
      }
    }
  },
  created: function () {
  },
  mounted: function () {
  }
}
</script>
